import React, { useState, memo } from 'react'
import { useHistory } from 'react-router-dom'
import { Modal, Picker } from 'antd-mobile'
import { useDispatch, useSelector, useStore } from 'react-redux'
import { useEffect } from 'react'
import MyModal from './mymodal';
import { updateOrder } from '../../../store/actionCreators'

const prompt = Modal.prompt
const alert = Modal.alert

const loadageList = [
  { label: '80%', value: '80' },
  { label: '81%', value: '81' },
  { label: '82%', value: '82' },
  { label: '83%', value: '83' },
  { label: '84%', value: '84' },
  { label: '85%', value: '85' },
  { label: '86%', value: '86' },
  { label: '87%', value: '87' },
  { label: '88%', value: '88' },
  { label: '89%', value: '89' },
  { label: '90%', value: '90' },
  { label: '91%', value: '91' },
  { label: '92%', value: '92' },
  { label: '93%', value: '93' },
  { label: '94%', value: '94' },
  { label: '95%', value: '95' },
  { label: '96%', value: '96' },
  { label: '97%', value: '97' },
  { label: '98%', value: '98' },
  { label: '99%', value: '99' },
  { label: '满载', value: '100' },
]


const Address = (props) => {
  let history = useHistory();
  let store = useStore();
  let defaultAddress = store.getState().defaultAddress;
  let selectAddress = store.getState().selectedAddress;

  const [address, setaddress] = useState(null)
  // const { data, type } = props

  useEffect(() => {

    if (props.type === 'pay') {
      // 如果是支付尾款
      setaddress(props.data)

    } else {
      if (defaultAddress.id) {
        // 有默认地址 如果选择地址为空那么使用默认地址

        if (selectAddress.id) {
          setaddress(selectAddress)
        } else {
          setaddress(defaultAddress)
        }

      } else {

        // 新用户新建地址没有默认地址

        if (selectAddress.id) {
          setaddress(selectAddress)
        }

      }
    }

  }, [address, props.data, props.type, selectAddress, defaultAddress])

  return (
    <div className="address common-card" onClick={e => { handelClick() }}>
      <div className="title">
        <p>我的收货地址</p>
      </div>
      <div className="detail flex-row">
        <div className="left">

          {address && <p className="phone-name"><span>{address.name}  </span> {address.tel}</p>}
          {address && <p className="detail-addres">{address.proc + " " + address.cityc + " " + address.countyc + " " + address.detailed_address}</p>}

          {address === null && <p className="phone-name"> 无地址，请选择或添加地址 </p>}

        </div>
        <div className="right">
          <img src="https://res.lexiangpingou.cn/images/826/2020/10/kZrQPuLVvq2zeRoVIr6vLR6HBl6Lk5.png" alt="" />
        </div>
      </div>
    </div>
  )

  function handelClick() {

    if (props.type === 'pay') {
      return false
    } else {

      localStorage.setItem('UPAD_orderno', JSON.stringify({ spe: '用于更新订单地址的参数', value: props.orderno }))
      history.push('/myaddress/order')
    }

  }

}


const PriceDetail = (props) => {

  const { priceList } = props

  return (
    <div className="price-detail common-cards">
      <ul>
        {
          priceList.map((item, key) => {
            return (
              <li className="price-list flex-row" key={key} style={item.name === '实付金额' ? { color: '#FF843A' } : {}} >
                <span >{item.name}</span>
                <span>￥{item.price} </span>
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}

// 装载量
const Loadage = (props) => {

  const dispatch = useDispatch()
  const order = useSelector(state => state.order)

  const storeLoadage = order.loadage ? order.loadage : false
  const [loadvalue, setLoadvalue] = useState(storeLoadage)
  const [pickSwitch, setPickSwitch] = useState(false)

  return (
    <>
      <div className="acceptable-time common-cards flex-row">
        <div className="left flex-row"
          onClick={e => {
            alert(
              <h2
                style={{
                  color: '#474747',
                  fontSize: '.48rem',
                  fontWeight: 'bold'
                }}
              >允许装载量</h2>, <p
                style={{
                  color: '#474747',
                  fontSize: '.32rem',
                  fontWeight: '500'
                }}
              >
              是指买家给平台匹配其他拼车用户所能承受的时间，如果在可接受时间内未与其他用户拼车成功，
              保证金将全部退还，如果可接受时间未到买家不能取消订单。
    </p>, [
              { text: '我知道了' }
            ])
          }}
        >
          <p>允许装载量</p>
          <img src="https://res.lexiangpingou.cn/images/826/2020/09/mTd4t9IhtdL74iIt6tu64CWt3dLthD.png" alt="" />
        </div>
        <div className="right" onClick={e => { setPickSwitch(!pickSwitch) }}>
          {loadvalue ? `${loadvalue}%` : '请选择装载量'}
        </div>
      </div>


      { pickSwitch && <Picker
        data={loadageList}
        visible={pickSwitch}
        onOk={e => { handelOnOk(e.toLocaleString()) }}
        onDismiss={e => { setPickSwitch(false) }}
        // onChange={e => {  setLoadvalue( e[0])  }}
        value={[loadvalue ? loadvalue : '80']}
        cols={1}
      >

      </Picker>}


    </>
  )

  function handelOnOk(v) {
    console.log(v)
    setLoadvalue(v)
    dispatch(updateOrder(Object.assign({}, order, { loadage: v })))
    setPickSwitch(!pickSwitch)
  }
}

// 拼单有效时间
const AcceptableTime = (props) => {

  const dispatch = useDispatch()
  const order = useSelector(state => state.order)
  const storeAcceptabletiem = order.acceptableTime ? order.acceptableTime : false
  const [time, setTime] = useState(storeAcceptabletiem)


  return (
    <div className="acceptable-time common-cards flex-row">
      <div className="left flex-row" onClick={e => {
        alert(
          <h2
            style={{
              color: '#474747',
              fontSize: '.48rem',
              fontWeight: 'bold'
            }}
          >拼单有效时间</h2>, <p
            style={{
              color: '#474747',
              fontSize: '.32rem',
              fontWeight: '500'
            }}
          >
          是指买家给平台匹配其他拼车用户所能承受的时间，如果在可接受时间内未与其他用户拼车成功，
          保证金将全部退还，如果可接受时间未到买家不能取消订单。
          </p>, [
          { text: '我知道了' }
        ])
      }}>
        <p>拼单有效时间</p>
        <img src="https://res.lexiangpingou.cn/images/826/2020/09/mTd4t9IhtdL74iIt6tu64CWt3dLthD.png" alt="" />
      </div>
      <div className="right" onClick={e => {
        prompt(<h2
          style={{
            color: '#474747',
            fontSize: '.48rem',
            fontWeight: 'bold'
          }}
        >
          请输入拼单有效时间</h2>

          , ``, [
          { text: '取消' },
          { text: '确认', onPress: value => { handelOnPress(parseInt(value)) } }
        ], 'default', '', ['单位小时,目前只支持整数小时'])
      }}>
        {time === false ? '请填写时间' : `${time}小时`}
      </div>
    </div>
  )

  function handelOnPress(v) {
    dispatch(updateOrder(Object.assign({}, order, { acceptableTime: v })))
    setTime(v)
  }

}

const TuanZhangAddress = (props) => {
  const [isShow, setIsShow] = useState(false)
  const [isAgree, setisAgree] = useState(true)
  const [groupAddress, setGroupAddress] = useState({})
  const [isRead, setIsRead] = useState(false)

  console.log(isRead)

  const modalconfig = {
    visible: isShow,
    closeModal: (e) => {
      setIsShow(!isShow)
    }
  }

  useEffect(() => {
    setGroupAddress(props.groupFirstAddress)
  }, [isAgree, props])

  return (
    <>
      <div className="tz-address-box common-card flex-column">
        <p className="title">
          实际到货地址
          </p>
        <p className="detail">
          {groupAddress.province}{groupAddress.city}{groupAddress.county}{groupAddress.detailed_address}
        </p>
        <div className="agree-rule flex-row">

          <div className="radio"
            onClick={e => { setisAgree(!isAgree) }}
          >

            <div className="checked"
              style={
                isAgree ? { backgroundColor: '#474747' } : {}
              }
            >

            </div>

          </div>

          <p>
            我已同意  <span onClick={e => { setIsShow(!isShow) }}>  【允许拼主自定义装载量规则说明】 </span>
          </p>

          {
            isShow &&
            <MyModal {...modalconfig} >
              <div className="flex-column container">

                <div className="dialog">
                  <div className='provision typora-export os-windows'>
                    <div id='write' className=''>
                      <h3><a name="交易须知" className="md-header-anchor" href="#"></a><span>交易须知</span></h3>
                      <p><span>本交易须知系“火蝶云”平台采购方与销售方之间采购方拼单交易的基本规则，请您在进一步操作之前仔细阅读、充分理解本协议的各个条款，
                      特别是以加粗形式提示您注意的条款。您有权选择同意或不同意本交易须知，您点击<b style={{ color: '#ff762e' }}>“我已阅读并同意”</b>按钮即视为您已阅读并接受本协议的所有条款。如您不同意本交易须知，请您立即停止本次拼单服务。</span>
                      </p>
                      <p><strong><span>一、拼单规则</span></strong></p>
                      <p><span>1、合同的成立与生效。您通过“火蝶云”平台下达订单后，仅表示系统接收到了您下达的订单。只有您支付下单要求的保证金后，您与销售方之间的买卖合同才成立；只有您拼单购买成功，您与销售方之间的买卖合同才生效。</span>
                      </p>
                      <p><span>2、如拼单购买未成功，“火蝶云”平台将在 小时内将您支付的保证金</span></p>
                      <p><span>无息退还，各方互不承担责任。</span></p>
                      <p><span>3、如拼单购买成功，您支付的保证金将自动转为应付货款，如该单非全款支付，您还应在拼单购买成功后 小时内支付剩余价款，否则因此导致销售方产品交付延迟或货损均由您方承担。</span></p>
                      <p><strong><span>二、物流运输</span></strong></p>
                      <p><span>1、您有权选择物流为寄付和到付两种方式，如您在拼单购买成功并支付全部价款后在 小时内未选择物流运输方式或选择寄付方式后 小时内未支付相应的运费，则销售方默认运费支付方式为货到付款。</span></p>
                      <p><span>2、销售方将在您确定物流方式 小时内安排物流运输。</span></p>
                      <p><span>3、您在本平台填写的邮寄地址即为产品寄送地址，请您仔细确认填写，无论是否本人签收或有无签收，产品到达邮寄地址即视为送达，如因非本人签收或无人签收或拒收造成的损失，销售方或平台不承担任何责任。</span>
                      </p>
                      <p><strong><span>三、产品验收</span></strong></p>
                      <p><span>1、您应当在产品送达之日起 小时内对产品是否符合约定和国家或行业标准进行验收。</span></p>
                      <p><span>2、如您在验收期内未提出异议，则视为产品符合约定。</span></p>
                      <p><strong><span>四、产品质量</span></strong></p>
                      <p><span>1、产品的性质、产地、规格、价格、注意事项等等内容由销售方负责提供，“火蝶云”平台负责形式审核。</span></p>
                      <p><span>2、产品的质量由销售方保证符合国家或者行业标准、销售方描述及各方之间就质量达成的约定。</span></p>
                      <p><strong><span>五、支付通道</span></strong></p>
                      <p><span>1、“火蝶云”平台向您通过多种支付款项的方式，您应通过平台提供的支付方式支付相应的款项。</span></p>
                      <p><span>2、如因“火蝶云”平台单种支付方式存在转账限额导致您不能单次支付全额款项，“火蝶云”平台同意您可通过多次支付方式进行多次支付。</span></p>
                      <p><strong><span>六、争议处理</span></strong></p>
                      <p><span>1、如您对产品存有异议，可向“火蝶云”平台申请介入，平台将根据与销售方的约定及平台规则进行调查及与销售方协调，如经调查确认异议成立，平台可为您向销售方主张权利提供必要的协助，如经调查确认异议并不成立，平台有权拒绝处理。</span>
                      </p>
                      <p><span>2、如您因产品问题向行政机关、司法机关投诉或者诉讼的，“火蝶云”平台有义务协助您提供相关销售商的信息。</span></p>
                      <p><strong><span>七、其他</span></strong></p>
                      <p><span>本交易须知的修订、变更将严格遵照法律法规的规定要求执行。</span></p>
                      <p><span> </span></p>
                      <p><span> </span></p>
                    </div>
                  </div>


                  <button
                    onClick={e => {
                      setIsRead(true)
                      setIsShow(!isShow)
                    }}

                    style={{
                      width: '100%',
                      height: '1.17rem',
                      backgroundColor: '#ff762e',
                      color: 'white',
                      borderRadius: '.15rem',
                      lineHeight: '1.17rem',
                      textAlign: 'center',
                      fontSize: '.4rem',
                      fontWeight: 'bold',
                      border: 'none'
                    }}
                  >
                    我已阅读
                </button>
                </div>

              </div>
            </MyModal>
          }
        </div>
      </div>
    </>
  )

}

const HDYProvision = memo((props) => {

  const dispatch = useDispatch()
  const order = useSelector(state => state.order)
  const [agree, setAgree] = useState(order.agree)
  const [seeProvision, setseeProvision] = useState(false)


  const isAgree = agree ? 'https://res.lexiangpingou.cn/images/826/2020/09/u2151MjqJj9sB7721qmU9s9s7UuJm3.png' : 'https://res.lexiangpingou.cn/images/826/2020/10/pGeMlZmBiHH1ZM7dGSmi676gO1xHbz.png'


  return (
    <>
      <div className="hdy-provision flex-row">
        <img src={isAgree} alt="" onClick={e => {
          setAgree(!agree)
          dispatch(updateOrder(Object.assign({}, order, { agree: !agree })))
        }} />
        <span onClick={e => { setseeProvision(!seeProvision) }}>我已同意 【火蝶甄品交易须知】</span>
      </div>
      {
        seeProvision && <交易须知内容 seeProvision={ seeProvision } setseeProvision={ setseeProvision } />
      }
    </>
  )
})

const 交易须知内容 = memo((props) => {

  const dispatch = useDispatch()
  const order = useSelector(state => state.order)
  const [isRead, setIsRead] = useState(order.isRead)
  const [disabled, setDisabled] = useState(true)
  const [counter, setCounter] = useState(6)
  const modalconfig = {
    visible: props.seeProvision,
    closeModal: (e) => {
     props.setseeProvision( !props.seeProvision )
    }
  }

  useEffect(() => {
    let SIV = setInterval(() => {
      console.log(counter)
      if (counter > 0) {
        setCounter(counter - 1)
      }
    }, 1000)
    return () => {
      clearInterval(SIV)
    }
  }, [counter])

  useEffect(() => {
    let STO = setTimeout(() => {
      setDisabled(false)
    }, 5000)

    return () => {
      clearTimeout(STO)
    }
  }, [])

  const disabledStyle = {
    position: 'absolute',
    bottom: '2rem',
    width: '90%',
    height: '1.17rem',
    backgroundColor: '#ccc',
    color: 'white',
    borderRadius: '.15rem',
    lineHeight: '1.17rem',
    textAlign: 'center',
    fontSize: '.4rem',
    fontWeight: 'bold',
    border: 'none'
  }

  return (
    <MyModal {...modalconfig} >
      <div className="flex-column container">

        <div className="dialog">
          <div className="close" onClick={e => {  props.setseeProvision( !props.seeProvision ) }}>
            <img src="https://res.lexiangpingou.cn/images/vip/chacha.png" alt="" />
          </div>

          <div className='provision typora-export os-windows'>
            <div id='write' className=''>
              <h3><a name="交易须知" className="md-header-anchor"></a><span>交易须知</span></h3>
              <p><span>本交易须知系“火蝶云”平台采购方与销售方之间采购方拼单交易的基本规则，请您在进一步操作之前仔细阅读、充分理解本协议的各个条款，
              特别是以加粗形式提示您注意的条款。您有权选择同意或不同意本交易须知，您点击<b style={{ color: '#ff762e' }}>“我已阅读并同意”</b>按钮即视为您已阅读并接受本协议的所有条款。如您不同意本交易须知，请您立即停止本次拼单服务。</span>
              </p>
              <p><strong><span>一、拼单规则</span></strong></p>
              <p><span>1、合同的成立与生效。您通过“火蝶云”平台下达订单后，仅表示系统接收到了您下达的订单。只有您支付下单要求的保证金后，您与销售方之间的买卖合同才成立；只有您拼单购买成功，您与销售方之间的买卖合同才生效。</span>
              </p>
              <p><span>2、如拼单购买未成功，“火蝶云”平台将在 小时内将您支付的保证金</span></p>
              <p><span>无息退还，各方互不承担责任。</span></p>
              <p><span>3、如拼单购买成功，您支付的保证金将自动转为应付货款，如该单非全款支付，您还应在拼单购买成功后 小时内支付剩余价款，否则因此导致销售方产品交付延迟或货损均由您方承担。</span></p>
              <p><strong><span>二、物流运输</span></strong></p>
              <p><span>1、您有权选择物流为寄付和到付两种方式，如您在拼单购买成功并支付全部价款后在 小时内未选择物流运输方式或选择寄付方式后 小时内未支付相应的运费，则销售方默认运费支付方式为货到付款。</span></p>
              <p><span>2、销售方将在您确定物流方式 小时内安排物流运输。</span></p>
              <p><span>3、您在本平台填写的邮寄地址即为产品寄送地址，请您仔细确认填写，无论是否本人签收或有无签收，产品到达邮寄地址即视为送达，如因非本人签收或无人签收或拒收造成的损失，销售方或平台不承担任何责任。</span>
              </p>
              <p><strong><span>三、产品验收</span></strong></p>
              <p><span>1、您应当在产品送达之日起 小时内对产品是否符合约定和国家或行业标准进行验收。</span></p>
              <p><span>2、如您在验收期内未提出异议，则视为产品符合约定。</span></p>
              <p><strong><span>四、产品质量</span></strong></p>
              <p><span>1、产品的性质、产地、规格、价格、注意事项等等内容由销售方负责提供，“火蝶云”平台负责形式审核。</span></p>
              <p><span>2、产品的质量由销售方保证符合国家或者行业标准、销售方描述及各方之间就质量达成的约定。</span></p>
              <p><strong><span>五、支付通道</span></strong></p>
              <p><span>1、“火蝶云”平台向您通过多种支付款项的方式，您应通过平台提供的支付方式支付相应的款项。</span></p>
              <p><span>2、如因“火蝶云”平台单种支付方式存在转账限额导致您不能单次支付全额款项，“火蝶云”平台同意您可通过多次支付方式进行多次支付。</span></p>
              <p><strong><span>六、争议处理</span></strong></p>
              <p><span>1、如您对产品存有异议，可向“火蝶云”平台申请介入，平台将根据与销售方的约定及平台规则进行调查及与销售方协调，如经调查确认异议成立，平台可为您向销售方主张权利提供必要的协助，如经调查确认异议并不成立，平台有权拒绝处理。</span>
              </p>
              <p><span>2、如您因产品问题向行政机关、司法机关投诉或者诉讼的，“火蝶云”平台有义务协助您提供相关销售商的信息。</span></p>
              <p><strong><span>七、其他</span></strong></p>
              <p><span>本交易须知的修订、变更将严格遵照法律法规的规定要求执行。</span></p>
              <p><span> </span></p>
              <p style={{ marginTop: '2rem' }}><span> </span></p>
            </div>
          </div>

          <button

            onClick={e => {
              dispatch(updateOrder(Object.assign({}, order, { isRead: true })))
              setIsRead(true)
              props.setseeProvision( !props.seeProvision )
            }}
            disabled={disabled}
            style={disabled ? disabledStyle : {
              position: 'absolute',
              bottom: '2rem',
              width: '90%',
              height: '1.17rem',
              backgroundColor: '#ff762e',
              color: 'white',
              borderRadius: '.15rem',
              lineHeight: '1.17rem',
              textAlign: 'center',
              fontSize: '.4rem',
              fontWeight: 'bold',
              border: 'none'
            }}
          >
            我已阅读 {disabled ? `(${counter})` : ''}
          </button>
        </div>

      </div>
    </MyModal>
  )
})

const Remark = (props) => {

  const dispatch = useDispatch()
  const order = useSelector(state => state.order)
  const [remark, setRemark] = useState(order.remark)

  return (
    <div className="remark common-cards">
      <span>订单备注</span>
      <input style={{ border: 'none', marginLeft: '.33rem', width: '6rem' }} name="remark" value={remark}
        onChange={e => { handelInput(e) }}
        placeholder="选填" type="text" />
    </div>
  )

  function handelInput(e) {
    setRemark(e.target.value)
    dispatch(updateOrder(Object.assign({}, order, { remark: e.target.value })))
  }
}

const PayWay = (props) => {

  return (
    <Modal className="">

    </Modal>
  )

}


export {
  Address,
  PriceDetail,
  AcceptableTime,
  TuanZhangAddress,
  Loadage,
  HDYProvision,
  Remark,
  PayWay
}